<template>
  <view class="cavasContainer">
    <canvas
      v-if="canvasId"
      class="ec-canvas"
      :id="canvasId"
      :canvasId="canvasId"
      @touchstart="touchStart"
      @touchmove="touchMove"
      @touchend="touchEnd"
      @error="error"
    ></canvas>
  </view>
</template>

<script>
import WxCanvas from "./wx-canvas";
export default {
  props: {
    canvasId: {
      type: String,
      default: "ec-canvas",
    },
    lazyLoad: {
      type: Boolean,
      default: false,
    },
    disableTouch: {
      type: Boolean,
      default: false,
    },
    throttleTouch: {
      type: Boolean,
      default: false,
    },
    data: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      width: "",
      height: "",
      tempFilePath: null,
    };
  },
  watch: {
    data(val) {
      this.init();
    },
  },
  // #ifdef H5
  mounted() {
    if (!this.lazyLoad) this.init();
  },
  // #endif
  // #ifdef H5
  onReady() {
    if (!this.lazyLoad) this.init();
  },
  // #endif
  methods: {
    setChart(chart) {
      this.chart = chart;
    },
    init() {
      const { canvasId } = this;
      this.ctx = wx.createCanvasContext(canvasId, this);
      this.ctx
        .draw
        // setTimeout(() => {
        //   wx.canvasToTempFilePath(
        //     {
        //       x: 0,
        //       y: 0,
        //       width: this.width,
        //       height: this.height,
        //       destWidth: this.width * 2,
        //       destHeight: this.height * 2,
        //       fileType: "png",
        //       canvasId: canvasId,
        //       success: (res) => {
        //         console.log("图片生成成功", res);
        //         uni.hideLoading();
        //         this.tempFilePath = res.tempFilePath;
        //         // this.$emit("sendImg", this.tempFilePath);
        //       },

        //       fail: function (err) {
        //         console.log(err, "图片生成失败99999999999");
        //       },
        //     },
        //     this
        //   );
        // }, 500)
        ();
      this.canvas = new WxCanvas(this.ctx, canvasId);
      const query = wx.createSelectorQuery().in(this);
      query
        .select(`#${canvasId}`)
        .boundingClientRect((res) => {
          // console.log("canvasId boundingClientRect", res);

          if (!res) {
            setTimeout(() => this.init(), 50);
            return;
          }

          if (res.width > 0 && res.height > 0) {
            this.$emit("onInit", {
              width: res.width,
              height: res.height,
            });
            this.width = res.width;
            this.height = res.height;
          } else {
            this.$emit("onInit", {
              width: 343,
              height: 260,
            });
            this.width = 343;
            this.height = 260;
          }
        })
        .exec();
    },
    canvasToTempFilePath(opt) {
      const { canvasId } = this;
      this.ctx.draw(true, () => {
        wx.canvasToTempFilePath({
          canvasId,
          ...opt,
        });
      });
    },
    touchStart(e) {
      e.preventDefault();
      const { disableTouch, chart } = this;
      // console.log("disableTouch chart", chart);

      if (disableTouch || !chart || !e.mp.touches.length) return;
      const touch = e.mp.touches[0];
      chart._zr.handler.dispatch("mousedown", {
        zrX: touch.x,
        zrY: touch.y,
      });
      chart._zr.handler.dispatch("mousemove", {
        zrX: touch.x,
        zrY: touch.y,
      });
    },
    touchMove(e) {
      e.preventDefault();
      const { disableTouch, throttleTouch, chart, lastMoveTime } = this;
      if (disableTouch || !chart || !e.mp.touches.length) return;
      if (throttleTouch) {
        const currMoveTime = Date.now();
        if (currMoveTime - lastMoveTime < 240) return;
        this.lastMoveTime = currMoveTime;
      }
      const touch = e.mp.touches[0];
      // 重点在这里...
      // 这里计算的是向右的偏移
      let xRight = this.width - this.width * 0.1;
      // 这里计算的是向左的偏移
      let xLeft = this.width * 0.1 + 5.8;
      // 这里计算的是向上的偏移
      let yTop = this.height - this.height * 0.2;
      // 这里计算的是向下的偏移
      let ybottom = this.height * 0.2;

      if (
        touch.x > xRight ||
        touch.x < xLeft ||
        touch.y > yTop ||
        touch.y < ybottom
      ) {
        return;
      }
      //重点完...
      chart._zr.handler.dispatch("mousemove", {
        zrX: touch.x,
        zrY: touch.y,
      });
    },
    touchEnd(e) {
      const { disableTouch, chart } = this;
      if (disableTouch || !chart) return;
      const touch = e.mp.changedTouches ? e.mp.changedTouches[0] : {};
      chart._zr.handler.dispatch("mouseup", {
        zrX: touch.x,
        zrY: touch.y,
      });
      chart._zr.handler.dispatch("click", {
        zrX: touch.x,
        zrY: touch.y,
      });
    },
  },
};
</script>

<style scoped>
.cavasContainer {
}
.ec-canvas {
  width: 100%;
  height: 100%;
  width: 100%;
  height: 520rpx;
  z-index: 1;
  /* position: absolute;
  left: -99999px; */
  /* flex: 1; */
}
</style>
